<template v-if="x.type === 'BaseGoods'">
	<view v-if="list.length > 0" class="flex-center" style="" :style="[x._outerStyle]">

		<view v-if="x.inputStyle.vType === 0" style="" :style="[x._interStyle]" class="flex-center flex-y">
			<template v-for="(xx, ii) in list" :key="x.inputStyle.vType + '_' + ii">
				<view class="goods-one" v-if="ii < x.inputStyle.vNumber" @click="goto.goods(xx.code)">
					<view class="goods-img relative">
						<view class="goods-imgd full ta-p-0">
							<uv-image :src="xx.cover" width="100%" height="100%" radius="10rpx" :observeLazyLoad="true" />
						</view>
						<view style="position:absolute;top:5rpx;right:5rpx;zoom:0.8">
							<uv-tags v-if="xx.level_upgrade == 0" type='success' size="mini" text="入会礼包" />
							<uv-tags v-if="xx.level_upgrade > 0" type="error" size="mini"
								:text="`升级VIP${xx.level_upgrade}`" />
						</view>
					</view>
					<view class="tn-text-center">
						<view class="goods-name uv-line-1">{{ xx.name }}</view>
						<view class="flex-x-center">
							<uv-text lineHeight="1.5em" mode="price" type="error" :bold="true" :align="`center`"
								:text="Number(xx.price_selling)" />
						</view>
					</view>
				</view>
			</template>
		</view>

		<view v-if="x.inputStyle.vType === 1" style="" :style="[x._interStyle]" class="flex-center flex-wrap">
			<template v-for="(xx, ii) in list" :key="x.inputStyle.vType + '_' + ii">
				<view class="goods-two" v-if="ii < x.inputStyle.vNumber" @click="goto.goods(xx.code)">
					<view class="goods-img relative">
						<view class="goods-imgd">
							<uv-image :src="xx.cover" width="100%" height="100%" radius="10rpx" :observeLazyLoad="true" />
						</view>
						<view style="position:absolute;top:5rpx;right:5rpx;font-size: 25rpx;zoom:0.8">
							<uv-tags v-if="xx.level_upgrade == 0" text="入会礼包" size="mini" />
							<uv-tags v-if="xx.level_upgrade > 0" :text="`升级VIP${xx.level_upgrade}`" type="error"
								size="mini" />
						</view>
					</view>
					<view class="tn-text-center">
						<view class="goods-name uv-line-1">{{ xx.name }}</view>
						<view class="flex-x-center">
							<uv-text lineHeight="1.5em" mode="price" type="error" :bold="true" align="center"
								:text="Number(xx.price_selling)" />
						</view>
					</view>
				</view>
			</template>
		</view>

		<view v-if="x.inputStyle.vType === 2" style="" :style="[x._interStyle]" class="flex-center flex-wrap">
			<template v-for="(xx, ii) in list" :key="x.inputStyle.vType + '_' + ii">
				<view class="goods-thr" v-if="ii < x.inputStyle.vNumber" @click="goto.goods(xx.code)">
					<view class="goods-img relative">
						<view class="goods-imgd">
							<uv-image :src="xx.cover" width="100%" height="100%" radius="10rpx" :observeLazyLoad="true" />
						</view>
						<view style="position:absolute;top:5rpx;right:5rpx;font-size: 25rpx;zoom:0.8">
							<uv-tags v-if="xx.level_upgrade == 0" text="入会礼包" size="mini" />
							<uv-tags v-if="xx.level_upgrade > 0" :text="`升级VIP${xx.level_upgrade}`" type="error"
								size="mini" />
						</view>
					</view>
					<view class="tn-text-center">
						<view class="goods-name uv-line-1">
							{{ xx.name }}
						</view>
						<view class="flex-x-center tn-text-sm">
							<uv-text lineHeight="1.5em" mode="price" type="error" :bold="true" align="center"
								:text="Number(xx.price_selling)" />
						</view>
					</view>
				</view>
			</template>
		</view>

		<view v-if="x.inputStyle.vType === 3" style="" :style="[x._interStyle]" class="flex-y">
			<template v-for="(xx, ii) in list" :key="x.inputStyle.vType + '_' + ii">
				<view class="goods-col flex-x tn-mt relative" v-if="ii < x.inputStyle.vNumber" @click="goto.goods(xx.code)">
					<view style="position:absolute;top:5rpx;right:5rpx;zoom:0.8">
						<uv-tags v-if="xx.level_upgrade == 0" text="入会礼包" size="mini" />
						<uv-tags v-if="xx.level_upgrade > 0" :text="`升级VIP${xx.level_upgrade}`" type="error" size="mini" />
					</view>
					<uv-image :src="xx.cover" width="150rpx" height="150rpx" radius="10rpx" :observeLazyLoad="true" />
					<view class="flex-1 flex-y flex-y-center tn-ml-sm">
						<view class="flex-x flex-center">
							<view class="goods-name tn-text-ellipsis-2">{{ xx.name }}</view>
						</view>
						<view class="flex-x flex-center">
							<text class="tn-grey_text">原价</text>
							<uv-text lineHeight="1.2em" mode="price" :bold="true" type="info"
								:text="Number(xx.price_market)" />
							<text class="tn-grey_text">售价</text>
							<uv-text lineHeight="1.2em" mode="price" :bold="true" type="error" align="left"
								:text="Number(xx.price_selling)" />
						</view>
					</view>
				</view>
			</template>
		</view>

	</view>
</template>

<style lang="scss" scoped>
@import "./m-view-base-goods.scss";
</style>

<script lang="ts">
import { defineComponent } from 'vue'
import { TaCache, TaDataGoods } from '@/utils';

export default defineComponent({
	props: {
		x: {
			type: Object,
			required: true
		}
	},
	data() {
		const sort: any = this.x.inputStyle.vSort || 0
		const ckey: any = `mall.goods.list${sort}`
		return {
			sort: <any>sort, ckey: <any>ckey,
			list: <any[]>TaCache.get(ckey) || [],
		}
	},
	created() {
		this.loadData()
		uni.$off('RefreshPageData', this.loadData)
		uni.$on('RefreshPageData', this.loadData)
	},
	methods: {
		loadData() {
			TaDataGoods.withGoods('', this.sort).then((ret: any) => {
				TaCache.set(this.ckey, this.list = ret.data.list, 60000)
			})
		}
	}
})
</script>